<script setup>
// import axios from 'axios'
//引入封装之后的axios网络请求
import {fetch7DayData} from '../api/weatherAPI'
import {initTempWeekEcharts} from '../util/echarts'
import { ref,watch } from 'vue'
//引入day.js库
import dayjs from 'dayjs';


const day7 = ref([]);
const updateTime = ref('')
var chartDom = ref(null)
//引入状态管理
import {useCityStore} from '../stores/cityStore'
const cityStore = useCityStore("")//响应式数据
const day7FxDate = ref([])//存放未来7天的预报时间
const day7TempMax = ref([])//存放未来7天的最高温度
const day7TempMin = ref([])//存放未来7天的最低温度
watch(
  //数据源
  ()=>cityStore.location,
  ()=>{
    //当侦听到数据源(location)发生变化时，应该重新发起网络请求
    getData(cityStore.location.id)
  },
  //及时回调，数据源没有改变的初始状态下执行回调函数一次
  {immediate : true}
)

//调用网络请求的函数
// getData(cityStore.location.id)

//封装axios之后的网络请求函数
async function getData(locationID){
  const res = await fetch7DayData (locationID)
  // console.log(res);
      day7.value = res.daily
    updateTime.value = dayjs(res.updateTime).format('YYYY年MM月DD日 HH时mm分')
    //每次发起请求时把未来24小时的时间和温度初始化为空
    day7FxDate.value = []
    day7TempMax.value = []
    day7TempMin.value = []

    day7.value.forEach(element => {
      day7FxDate.value.push(element.fxDate)
      day7TempMax.value.push(element.tempMax)
      day7TempMin.value.push(element.tempMin)
    });
    initTempWeekEcharts(chartDom.value,day7FxDate.value,day7TempMax.value,day7TempMin.value)
}


</script>
<template>
  <h1>未来7日天气数据</h1>
    <div>
      <span>最后更新时间：{{ updateTime }}</span>
    </div>
    <div id="main" ref="chartDom"></div>
</template>

<style scoped>
#main{
  width: 100%;
  height: 400px;
}
</style>
